<!--模板 html-->
<template>
    <div>
      <!-- 按钮 -->
      <!-- @click="toFormHandler"：跳转到表单的处理器，toFormHandler是一个方法 -->
      <div class="btns">
        <el-button type="primary" size="small" @click="toFormHandler">新增</el-button>
      </div>
      <!-- 表格 -->
      <div class="tab_content">
        <el-table :data="comments" style="width: 100%" size="small" border>
          <el-table-column prop="content" label="备注" width="180"> </el-table-column>
          <el-table-column prop="commentTime" label="备注时间" width="180"> </el-table-column>
          <el-table-column prop="floor" label="层数" width="180"> </el-table-column>
          <el-table-column prop="status" label="状态" width="180"> </el-table-column>
          <el-table-column prop="userId" label="用户id" width="180"> </el-table-column>
          <!-- 操作列 -->
          <el-table-column width="100" align="center" label="操作">
              <!-- slot-scope="scope"：作用域插槽 -->
              <template slot-scope="scope">
                  <el-button type="text" @click="editHandler(scope.row)">修改</el-button>
                  <!-- scope.row：当前行数据 -->
                  <el-button type="text" @click="deleteHandler(scope.row)">删除</el-button>
              </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </template>
  <!-- 脚本 js -->
  <script>
  import { del, get } from '@/utils/request'
  export default {
      // 定义变量，在模板中直接使用
      data(){ 
          return {
            comments:[],
            visible:false
          }
      },
      // 定义事件处理函数（方法）
      methods:{
          // 删除的处理函数
          deleteHandler(row){
              this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                // 当用户点击了确定才会执行
                let url = "http://localhost:8888/comment/deleteById"
                // {id:row.id}是一个对象get、post、delete的三个方法在传参的时候只能传对象
                // 记得导入import { del, get } from '@/utils/request'
                del(url,{id:row.id}).then(resp =>{
                    // 提示
                    this.$message({type:"success",message:resp.message});
                    // 更新页面
                    this.loadComments();
                  })
                })
          },
          // 修改的处理函数
          editHandler(row){
            // 跳转到表单。$router：vue的一个模块；push：推动；
            // {}内为一个对象,里面有两个元素，path为form表单路由的路径（子路由+父路由），
            // query为前端传递进来的参数
            this.$router.push({
               path:"/lzc/comment_form",
                query:row
            })
          },
          // 跳转到基本角色添加页面
          toFormHandler(){
              // 跳转到表单。$router：vue的一个模块；push：推动；
              // {}内为一个对象,里面有两个元素，path为form表单路由的路径（子路由+父路由），
              // query为传递的参数（因为我们新增的时候不需要传参，所以我们可不写）
              this.$router.push({
                  path:"/lzc/comment_form",
                  // query:
              })
          },
          // 查询所有的基本角色数据
          loadComments(){
              let url = "http://localhost:8888/comment/query"
              // get方法从import { get } from '@/utils/request'获得
              get(url).then(resp=>{
                  // 获得前端请求数据之后做的事情
                  // 获取后端数据
                  this.comments = resp.data;
              })
          }
      },
      // 生命周期钩子函数
      created(){
          // loadBaseroles()函数默认不会自动执行，所以我们在这里加载使其执行
          // 做了这一步才能从数据库拿到数据this.categorys = resp.data
          // 页面加载出来的时候，拿到路由中的参数，放到this.form中
          this.loadComments();
      }
  }
  </script>
  <!-- 样式 css -->
  // sass：css的一个脚本化语言，能帮我们产生css
  <style lang="sass" scoped>
  
  </style>
  